<template>
  <div id="activity-common-layout">
    <el-container class="container-box">
      <el-container v-loading="!isMounted">
        <el-header class="container-header">
          <div class="container-header-title">
            <span class="container-header-activityName" :title="matchInfo.name">
              {{ matchInfo.name }}
            </span>
            <el-tag class="container-header-activityTag" :type="jianchatime(matchInfo).type" effect="dark"
              size="default">
              {{ jianchatime(matchInfo).text2 }}
            </el-tag>
            <!-- 倒计时 -->
            <el-tag class="container-header-activityTime" v-if="!isActivityEnd">
              距{{ n }}:
              <span>{{ time.d }}</span>天
              <span>{{ time.h }}</span>时
              <span>{{ time.m }}</span>分
              <span>{{ time.s }}</span>秒
            </el-tag>
          </div>
          <div class="descriptions-box">
            <el-descriptions title="" :column="4" size="default">
              <template #title></template>
              <el-descriptions-item label="开始时间:">
                {{ TimeYH(matchInfo.activitystarttime) }}
              </el-descriptions-item>
              <el-descriptions-item label="比赛时长:">
                {{ matchInfo.duration ? `${(matchInfo.duration / 60).toFixed(1)}小时` :
                  timeDiff(matchInfo.activitystarttime, matchInfo.activityendtime) }}
              </el-descriptions-item>
              <el-descriptions-item label="比赛类型:">{{ matchInfo.type === "public" ? "公开" : "非公开" }}
              </el-descriptions-item>
              <!-- <el-descriptions-item label="如有问题请联系老师:" :rowspan="4">
                <img
                  :src="matchInfo?.customerservice?.qrcode || 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/erweima_guhang.jpg'"
                  width="120" alt="">
              </el-descriptions-item> -->
              <!-- 让二维码 label 占一列，内容（图片）占多行 -->
              <el-descriptions-item label="" label-class-name="label-align-top" :rowspan="4" v-if="matchInfo?.customerservice">
                <template #label>
                  <span>如有问题请联系老师:</span>
                </template>
                <img
                  :src="matchInfo?.customerservice?.qrcode"
                  width="120" alt="">
              </el-descriptions-item>
              <el-descriptions-item label="结束时间:">{{ TimeYH(matchInfo.activityendtime) }}</el-descriptions-item>
              <el-descriptions-item label="计时方式:">{{ matchInfo.duration ? '个人计时' : '统一计时' }}</el-descriptions-item>
              <el-descriptions-item label="比赛赛制:">{{ matchInfo.format }}</el-descriptions-item>
              <el-descriptions-item :span=3 label="比赛积分:" v-show="matchInfo.integral">{{ matchInfo.integral
              }}</el-descriptions-item>
              <!-- <el-descriptions-item :span=3 label="比赛题目:">
                <template #default>
                  <span class="" v-for="(v, k) in matchQuestionComputed">
                    {{ `${k}题：${v.count} (共${v.score}分)` }}&nbsp;&nbsp;
                  </span>
                </template>
              </el-descriptions-item> -->
            </el-descriptions>
            <div class="container-header-flex margin-top20">
              <!-- isMounted 默认false 避免闪烁出现按钮 isSignUp && isActivityIn-->
              <el-button type="primary" size="" v-if="isMounted && !isActivityEnd" :disabled="!isActivityIn"
                class="btn-tab" @click="signUp">
                {{ signUpTitle }}
              </el-button>
              <!-- isMounted && isActivityStart && matchInfo.file -->
              <el-button type="primary" size="" v-if="isMounted && isActivityStart && matchInfo.file"
                class="file-download-btn">
                <a target="_blank" :href="matchInfo.file">
                  <el-icon class="icon">
                    <Download />
                  </el-icon>
                  下发文件下载
                </a>
              </el-button>
            </div>
            <!-- 如果在比赛中则显示按钮，点击跳转比赛题目 -->
          </div>
        </el-header>
        <el-main class="padding0">
          <!-- 中间tabs class="container-content-tabs-box" -->
          <div class="">
            <div class="">
              <!-- 报名前 aticleid.isinvitation-->
              <!-- <div v-if="!isJoin && matchInfo.invitation" class="invitation el-tabs__header">
                <div class="invitation-form">
                  <el-input size="large" v-model="invitationvalue" style="width: 400px" placeholder="进入该比赛需要激活码，请输入"
                    clearable>
                  </el-input>
                  &nbsp;
                  <el-button size="large" type="primary" @click="invitation"> 确定 </el-button>
                </div>
              </div> -->
              <el-tabs v-if="matchInfo.invitation && !isJoin" v-model="activeName" class="match-tabs" type="">
                <!-- 比赛公告 -->
                <el-tab-pane lazy :name="Tabs.MATCHDESCRIPTION.tabName">
                  <template #label>
                    <el-icon>
                      <BellFilled />
                    </el-icon>
                    <span>{{ Tabs.MATCHDESCRIPTION.tabLabel }}</span>
                  </template>
                  <div class="acvitity-desc container-content">
                    <div class="invitation-form">
                      <el-input size="default" v-model="invitationvalue" style="width: 400px"
                        placeholder="进入该比赛需要邀请码，请输入。如无邀请码，请联系老师" clearable>
                      </el-input>
                      &nbsp;
                      <el-button size="default" type="primary" @click="invitation"> 确定 </el-button>
                    </div>
                    <div class="aside-container-box">
                      <div class="aside-card-title">比赛公告</div>
                      <el-divider />
                      <!-- matchInfo.invitation ? isJoin : true -->
                      <div v-if="true" class="editor-content-view" v-html="matchInfo.context">
                      </div>
                      <div v-else class="aside-card-content"> 报名比赛可见 </div>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
              <el-tabs v-else v-model="activeName" class="match-tabs" type="">
                <!-- <template v-for="(v,k) in Tabs" :key="k">
                  <el-tab-pane :name="v.tabName">
                    <template #label>
                      &nbsp;<span>{{v.tabLabel}}</span>
                      &nbsp;<span>{{v,k}}</span>
                    </template>
                  </el-tab-pane>
                </template> -->
                <!-- 比赛公告 比赛说明可见权限：aticleid.isinvitation-->
                <el-tab-pane lazy :name="Tabs.MATCHDESCRIPTION.tabName">
                  <template #label>
                    <el-icon>
                      <BellFilled />
                    </el-icon>
                    &nbsp;<span>{{ Tabs.MATCHDESCRIPTION.tabLabel }}</span>
                  </template>
                  <div class="acvitity-desc container-content">
                    <div class="aside-container-box">
                      <div class="aside-card-title">比赛公告</div>
                      <el-divider />
                      <!-- matchInfo.isinvitation ? isJoin : true -->
                      <div v-if="true" class="editor-content-view aside-card-content" v-html="matchInfo.context">
                      </div>
                      <div v-else class="aside-card-content"> 报名比赛可见 </div>
                    </div>
                  </div>
                </el-tab-pane>
                <!-- 比赛题目 -->
                <el-tab-pane lazy v-if="Tabs.MATCHQUESTION.show()" :name="Tabs.MATCHQUESTION.tabName">
                  <template #label>
                    <el-icon>
                      <List />
                    </el-icon>
                    &nbsp;<span>{{ Tabs.MATCHQUESTION.tabLabel }}</span>
                  </template>
                  <div class="container-content">
                    <MatchQuestion :activity="matchInfo" :setduration="setduration">
                    </MatchQuestion>
                  </div>
                </el-tab-pane>
                <!-- 比赛中rank -->
                <el-tab-pane lazy v-if="Tabs.MATCHRANKING.show()" :name="Tabs.MATCHRANKING.tabName">
                  <template #label>
                    <el-icon>
                      <TrendCharts />
                    </el-icon>
                    &nbsp;<span>{{ Tabs.MATCHRANKING.tabLabel }}</span>
                  </template>
                  <div class="container-content">
                    <MatchRanking :activity="matchInfo">
                    </MatchRanking>
                  </div>
                </el-tab-pane>
                <!-- 赛后成绩 -->
                <el-tab-pane lazy v-if="Tabs.MATCHENDRESULT.show()" :name="Tabs.MATCHENDRESULT.tabName">
                  <template #label>
                    <el-icon>
                      <TrendCharts />
                    </el-icon>
                    &nbsp;<span>{{ Tabs.MATCHENDRESULT.tabLabel }}</span>
                  </template>
                  <div class="container-content">
                    <MatchEndResult :activity="matchInfo">
                    </MatchEndResult>
                  </div>
                </el-tab-pane>
                <!-- 赛后总结 -->
                <el-tab-pane lazy v-if="Tabs.MATCHSUMMARIZE.show()" :name="Tabs.MATCHSUMMARIZE.tabName">
                  <template #label>
                    <el-icon>
                      <Opportunity />
                    </el-icon>
                    &nbsp;<span>{{ Tabs.MATCHSUMMARIZE.tabLabel }}</span>
                  </template>
                  <div class="container-content">
                    <MatchSummarize :match="matchInfo">
                    </MatchSummarize>
                  </div>
                </el-tab-pane>
                <!-- 补题分析 -->
                <el-tab-pane lazy v-if="Tabs.MATCHANSWERANALYSIS.show()" :name="Tabs.MATCHANSWERANALYSIS.tabName">
                  <template #label>
                    <el-icon>
                      <Histogram />
                    </el-icon>
                    &nbsp;<span>{{ Tabs.MATCHANSWERANALYSIS.tabLabel }}</span>
                  </template>
                  <div class="container-content">
                    <MATCHANSWERANALYSIS :activity="matchInfo">
                    </MATCHANSWERANALYSIS>
                  </div>
                </el-tab-pane>
                <!-- AI分析 -->
                <!-- <el-tab-pane lazy v-if="Tabs.AIACTIVITYSUMMARIZE.show()" :name="Tabs.AIACTIVITYSUMMARIZE.tabName">
                  <template #label>
                    <el-icon>
                      <Ticket />
                    </el-icon>
                    &nbsp;<span>{{ Tabs.AIACTIVITYSUMMARIZE.tabLabel }}</span>
                  </template>
                  <div class="container-content">
                    <ActivitySummarizeIndex :data="matchInfo" :activitySummarize :activityUserSummarize  :userId="user?.ID">
                    </ActivitySummarizeIndex>
                  </div>
                </el-tab-pane> -->
              </el-tabs>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, dayjs } from "element-plus";
import { computed, inject, onActivated, onBeforeUnmount, onDeactivated, onMounted, reactive, ref } from 'vue';
import { useStore } from "vuex";
import { asyncTeamGetActivity, asyncchangeactivityuser, asyncgetactivityuser, asyncselectmatchuserquestion } from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { adminTeamId } from '../../../util/data';
import { TimeYH } from "../../../util/time";
import { JCTime, dhms, jianchatime } from "@/util/jianchatime";
import MATCHANSWERANALYSIS from './matchAnswerAnalysis.vue';
import MatchEndResult from './matchEndResult.vue';
import MatchQuestion from './matchQuestion.vue';
import MatchRanking from './matchRanking.vue';
import MatchSummarize from './matchSummarize.vue';
// 赛制
enum Format {
  OI = "OI",
  IOI = "IOI",
}

// 报名之后的Tabs
const Tabs: {
  [key: string]: {
    tabLabel: string, tabName: string, icon: string, show: () => boolean
  }
} = {
  MATCHDESCRIPTION: { tabLabel: "比赛公告", tabName: "matchDescription", icon: "", show: function () { return true } },
  MATCHQUESTION: { tabLabel: "比赛题目", tabName: "matchQuestion", icon: "", show: function () { return isJoin.value && isActivityStart.value } },
  MATCHRANKING: { tabLabel: "赛中成绩", tabName: "matchInResult", icon: "", show: function () { return isJoin.value && isActivityIn.value && isShowRanking.value } },
  MATCHENDRESULT: { tabLabel: "赛后成绩", tabName: "matchEndResult", icon: "", show: function () { return isJoin.value && isActivityEnd.value } },
  MATCHSUMMARIZE: { tabLabel: "赛后总结", tabName: "matchSummarize", icon: "", show: function () { return isJoin.value && isActivityEnd.value } },
  MATCHANSWERANALYSIS: { tabLabel: "补题成绩", tabName: "matchAnswerAnalysis", icon: "", show: function () { return isJoin.value && isActivityEnd.value } },
  AIACTIVITYSUMMARIZE: {
    tabLabel: "AI分析", tabName: "AIActivitySummarize", icon: "", show: function () {
      return (activitySummarize.value || activityUserSummarize.value) && isHGKJteam.value && isJoin.value && isActivityEnd.value
    }
  },
}
const activeName = ref(Tabs.MATCHDESCRIPTION.tabName)

const props = defineProps<{ ID?: number }>()
const store = useStore(Storekey)
const user = computed(() => {
  return store.state.user
})
const teamId = computed(() => {
  return user.value?.teamid;
});
// isHGKJteam
const isHGKJteam = computed(() => {
  return teamId?.value === adminTeamId
})
const datenow = computed(() => {
  return store.state.time!
})
const getteam = computed(() => {
  return store.state.team?.rows || []
})
// 
const activitySummarize = computed(() => { return getteam.value.some(c => c?.other?.activitySummarize) })
const activityUserSummarize = computed(() => { return getteam.value.some(c => c?.other?.activityUserSummarize) })

const loginfunction = inject<(key: string) => void>('headnavdialogVisible')
const matchInfo = reactive<Studycodemodel.Iactivity>({})
const time = reactive<JCTime>({ isok: false, d: 0, h: 0, s: 0, m: 0, })
const timer = ref(0)
const n = ref('开始')
// 比赛参与者
const activityusers = ref<Studycodemodel.Iactivityuser[]>([])
const isMounted = ref(false)

function init() {
  getMatcInfo().then((_e) => {
    const s = new Date(matchInfo.activitystarttime || new Date);
    const e = new Date(matchInfo.activityendtime || new Date);
    function countdown() {
      let t;
      if (s.getTime() > datenow.value) {
        n.value = "开始";
        t = s;
      } else {
        n.value = "结束";
        t = e;
      }
      const time1 = dhms(t, datenow.value);
      Object.assign(time, time1)
    }
    countdown()
    timer.value = window.setInterval(countdown, 1000);
    isMounted.value = true
    start()
  });
}
onMounted(() => {
  init()
})
onActivated(() => {
  init()
})
onDeactivated(() => {
  clearInterval(timer.value)
})
onBeforeUnmount(() => {
  clearInterval(timer.value)
})

const matchQuestion = ref<Studycodemodel.Iquestion[]>([])
const matchQuestionComputed = computed(() => {
  const info = {} // "选择": { count: 1, score: 20 } 
  matchQuestion.value.reduce((ret, e) => {
    const { type, score } = e;
    if (info[type]) {
      info[type].count++
      info[type].score += score
    } else {
      info[type] = { count: 1, score }
    }
  }, info)
  return info
})

async function getMatcInfo() {
  if (typeof props.ID === 'number') {
    try {
      // const matchRet = await asyncgetactivity({ ID: props.ID });
      const matchRet = await asyncTeamGetActivity({ ID: props.ID, teamid: teamId.value });
      Object.assign(matchInfo, matchRet)
    } catch (e: any) {
      ElMessage.error(e);
    }
  }
}

async function start() {
  if (typeof props.ID === 'number') {
    try {
      // 比赛信息
      // const matchRet = await asyncgetactivity({ ID: props.ID });
      // const matchRet = await asyncTeamGetActivity({ ID: props.ID, teamid: teamId.value });
      // Object.assign(matchInfo, matchRet)

      // 比赛题目
      const { question, activity, userquestion } = await asyncselectmatchuserquestion({ ID: props.ID, my: true })
      matchQuestion.value = question || []

      try {
        // 获取我的参赛信息
        const activityuser = await asyncgetactivityuser({ activityid: props.ID })
        Object.assign(matchInfo, {
          activityuser: matchInfo.activityuser?.concat([activityuser])
        })
      } catch (e) {
        console.error("asyncgetactivityuser err=>", e)
      }
      // 获取比赛参与者
      activityusers.value = matchInfo.activityuser || []
    } catch (e: any) {
      ElMessage.error(e);
    }
  }
}

// endTime - startTime
function timeDiff(a?: Date | string, b?: Date | string) {
  const t = dayjs(b).toDate().getTime() - dayjs(a).toDate().getTime()
  let n: string | number = (t / 60 / 60 / 1000).toFixed(1)
  if (Number(n) === Math.floor(Number(n))) {
    n = Math.floor(Number(n))
  }
  return n + '小时'
}

// 比赛是否开始
const isActivityStart = computed(() => {
  if (matchInfo.activitystarttime) {
    return new Date(matchInfo.activitystarttime).getTime() < datenow.value
  }
  return false
})
// 是否在比赛中
const isActivityIn = computed(() => {
  // return true
  if (matchInfo.activitystarttime && matchInfo.activityendtime) {
    return new Date(matchInfo.activitystarttime).getTime() < datenow.value
      && new Date(matchInfo.activityendtime).getTime() > datenow.value
  }
  return false
})
// 比赛是否结束
const isActivityEnd = computed(() => {
  if (matchInfo.activityendtime) {
    return new Date(matchInfo.activityendtime).getTime() < datenow.value
  }
  return false
})
// 是否已报名 false:可以报名 true:不能报名
const isSignUp = computed(() => {
  // return false
  if (!user.value) return false;
  if (isActivityEnd.value) {
    return true;
  }
  let check = true
  const findRet = matchInfo?.activityuser?.find((v) => v.userid == user.value?.ID);
  if (!findRet) {
    check = false;
  }
  // activityuser中没有 获取比赛参与者查看
  if (activityusers.value.length) {
    const ret = activityusers.value.find((v) => v.userid == user.value?.ID);
    if (!ret) {
      check = false;
    }
  } else if (matchInfo.teamid && teamId.value === matchInfo.teamid) {
    check = true;
  } else {
    check = true
  }
  return check;
})
// 激活码
const invitationvalue = ref<string>()
function invitation() {
  if (invitationvalue.value) {
    const t = matchInfo.invitation?.split(',').includes(invitationvalue.value)
    if (t) {
      localStorage.setItem(`${user.value?.ID}-${matchInfo.ID}`, invitationvalue.value)
      // 激活码正确 直接报名
      signUp()
      return
    }
  }
  ElMessage.error('邀请码输入错误')
}

// 老版本进入比赛
/**
 * 公开比赛：是否有验证码
 * 团队比赛：是否可参赛
 */
async function signUp() {
  // if (aticleid.type !== "public") {
  //   ElMessage.error("此比赛不是公开比赛，禁止报名");
  //   return;
  // }
  if (isActivityEnd.value) {
    ElMessage.error("比赛已结束！无法进入");
    return;
  }
  // 非公公开比赛才需要报名
  if (matchInfo.type !== "public" && !isJoin.value) {
    ElMessage.error("暂无参赛权限！无法进入");
    return;
  }
  if (matchInfo.invitation && !user.value?.isAdmin) {
    const tempInvitation = localStorage.getItem(`${user.value?.ID}-${matchInfo.ID}`) || invitationvalue.value
    let check = false
    if (tempInvitation) {
      check = matchInfo.invitation?.split(',').includes(tempInvitation)
    }
    // admin 不需要判断 admin默认直接进入比赛
    if (!user.value?.isAdmin && !check) {
      return ElMessage.error('邀请码输入错误')
    }
  }
  activeName.value = Tabs.MATCHQUESTION.show() ? Tabs.MATCHQUESTION.tabName : Tabs.MATCHDESCRIPTION.tabName
  try {
    if (matchInfo.type !== "public") {
      console.log("此比赛不是公开比赛，禁止报名");
      return;
    }
    // 更新参与者
    await asyncchangeactivityuser({ activityid: props.ID, });
    start().then(e => {
      const n = matchInfo.activityuser?.find(e => e.userid === user.value?.ID)
      if (n) {
        ElMessage.success('报名成功')
        // TODO 需要进行比赛计时
        activeName.value = Tabs.MATCHQUESTION.show() ? Tabs.MATCHQUESTION.tabName : Tabs.MATCHDESCRIPTION.tabName
      } else {
        ElMessage.success('取消报名')
      }
    })
  } catch (e: any) {
    ElMessage.error(e);
  }
}

// 比赛公告、题目、排行、成绩是否可见
const isJoin = computed(() => {
  const n = matchInfo.activityuser?.find(e => e.userid === user.value?.ID)
  if (n) {
    return true
  }
  let k = false
  // 比赛成员范围
  if (activityusers.value.length) {
    k = !!activityusers.value.find(e => {
      return user.value?.ID === e.userid
    })
    // 教师、管理
    if (user.value?.isAdmin) {
      // 有邀请码的都要展示邀请码
      k = matchInfo.invitation ? false : true
    }
  }
  // 判断团队id
  else if (matchInfo.teamid && teamId.value === matchInfo.teamid) {
    k = true;
  }

  // 是否区分赛后、赛中
  if (isActivityEnd.value) {
    k = true
  }
  // 处理异常
  if (teamId.value !== matchInfo.teamid) {
    k = false
  }

  // 公开比赛
  // if (matchInfo.type === "public") {
  //   k = true
  // }
  // TODO 教师、管理
  if (user.value?.isAdmin) {
    // 有邀请码的都要展示邀请码
    k = matchInfo.invitation ? false : true
  }
  return k
})
// 报名比赛 进入比赛
const signUpTitle = computed(() => {
  return isJoin.value ? '进入比赛' : '报名比赛'
})

// 距离比赛结束
const duration = ref<{ activityendtime: Date, activitystarttime: Date }>()

function setduration(data: { activityendtime: Date, activitystarttime: Date }) {
  duration.value = data
}

// 展示rank
const isShowRanking = computed(() => {
  return matchInfo.isrank
  // return !!(matchInfo.isranking && matchInfo.format === Format.IOI)
})
</script>

<style scoped>
.container-box {
  padding: var(--container-margin) 5% 0;
  margin: var(--container-margin) 0rem 0 0rem;
  /* 外边距 */
  --container-margin: 20px;
  --container-header-height: 23vh;
  --container-bg-color: #fff;

  --descriptions-bg-color: #fafafa;
}

.container-header {
  height: var(--container-header-height);
  min-height: var(--container-header-height);
  background: var(--container-bg-color);
  width: 100%;
  padding: var(--container-margin);

  box-shadow: var(--container-box-shadow);
  border-radius: var(--container-border-radius);
}

.container-header-title {
  display: flex;
  align-items: center;
  margin-bottom: var(--container-margin);
  padding: 0 var(--container-margin);
}

.container-header-activityName {
  /* width: 90%; */
  font-weight: bolder;
  font-size: 1.5rem;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container-header-activityTag {
  margin-left: 10px;
  /* display: inline-block; */
}

.container-header-flex {
  display: flex;
}

.btn-tab {
  font-weight: bolder;
  width: 150px;
  border-radius: 8px;
}

.container-header-activityTime {
  margin-left: 20px;
  text-align: center;
  /* color: var(--sass-color-blue); */
  /* font-size: 12px; */
}

.descriptions-box {
  padding: 10px 20px;
  margin-left: 0;
  font-size: 14px;
  background: var(--descriptions-bg-color);
  box-shadow: var(--container-box-shadow);
  border-radius: var(--container-border-radius);
}

/* 激活码 */
.invitation,
.tabs-box {
  height: 80%;
  display: flex;
  flex-wrap: wrap;
}

.invitation {
  flex-direction: column;
  justify-content: center;
  height: 100px;
}

.invitation-desc {
  margin-bottom: 10px;
}


/* 下发文件下载 */
.file-download-btn,
.file-download-btn a {
  border-radius: 8px;
  color: #fff;
}

/* .file-download-btn [class*=el-icon]+span {
    margin-left: 2px;
    font-weight: bolder;
} */
.file-download-btn:hover a {
  color: #fff;
}


.container-content-tabs-box {
  background: var(--container-bg-color);
  margin-top: var(--container-margin);
  padding: 1px var(--container-margin);
  box-shadow: var(--container-box-shadow);
  border-radius: var(--container-border-radius);
}

/* 报名后的tabs */
.tabs-box {
  justify-content: space-between;
  align-items: center;
}

.container-content {
  background: var(--container-bg-color);
  margin-top: var(--container-margin);
  padding: var(--container-margin);
  min-width: 80%;
  /* TODO */
  /* height: calc(100vh - 64px - var(--container-margin)* 5 - var(--container-header-height)) */
}

.acvitity-desc {
  button {
    font-weight: bolder;
    width: 160px;
    border-radius: 8px;
  }
}

/* 右侧 */
.aside-container-box {
  padding: var(--container-margin);
}

.aside-card-title {
  font-weight: bolder;
  font-size: 1.5rem;
}



/* 状态 */
.info,
.primary,
.danger,
.success {
  width: 44px;
  height: 24px;
  color: #fff;
  display: inline-block;
  text-align: justify;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  border-radius: 5px;
}

/* 赛事结束-已结束 */
.info {
  background-color: rgba(236, 128, 141, 1);
}

/* 立即报名-报名中 */
.primary {
  background: rgb(112, 182, 3);
  /* transform: translateY(-3px); */
}

/* 即将开赛-未开始 */
.danger {
  background: rgb(170, 170, 170);
  /* transform: translateY(-3px); */
}

/* 进入比赛-比赛中 */
.success {
  background: var(--color-cheng);
  /* transform: translateY(-3px); */
}
</style>

<style>
/* 自定义.el-descriptions 样式 */
#app.ojSass #activity-common-layout .descriptions-box .el-descriptions {
  width: 80%;
}

#app.ojSass #activity-common-layout .el-descriptions__header {
  margin: 0;
}

#app.ojSass #activity-common-layout .el-descriptions__body {
  border-left: 4px solid var(--sass-color-blue);
  background: var(--descriptions-bg-color) !important;
  padding: 0 20px;
}

#app.ojSass #activity-common-layout .el-descriptions__body .el-descriptions__cell {
  padding-bottom: 4px;
}

/* 自定义tabs样式 */
#app.ojSass #activity-common-layout .el-tabs__header {
  background: var(--container-bg-color);
  border: none;
  margin: 0;

  background: var(--container-bg-color);
  margin-top: var(--container-margin);
  padding: 1px var(--container-margin);
  box-shadow: var(--container-box-shadow);
  border-radius: var(--container-border-radius);
}

#app.ojSass #activity-common-layout .el-tabs__nav-wrap:after {
  background-color: transparent;
  height: 0;
}

#app.ojSass #activity-common-layout .el-tabs__item {
  height: 50px;
  line-height: 50px;
}

#app.ojSass #activity-common-layout .label-align-top {
  display: inline-flex;
  vertical-align: top !important;
  height: 34.813px;
  align-items: center;
}
</style>